<template>
  <div
    class="header-div flex-row"
    :class="[headType === 'home' ? 'home-header' : 'rest']"
  >
    <p class="flex-row" v-if="headType == 'home'">
      <van-icon name="newspaper-o" class="news active" />
      <i class="active head-text">{{ i18n.$t('lookNews') }}</i>
    </p>
    <p class="flex-row" v-if="headType == 'back'" @click="goToBack">
      <van-icon name="arrow-left" class="active" />
      <span class="active head-text">{{ i18n.$t('back') }}</span>
    </p>
    <van-popover
      class="head-pop"
      v-model:show="showPopover"
      teleport="#app"
      :actions="actions"
      @select="popSelect"
    >
      <template #reference>
        <p class="head-text">En</p>
      </template>
    </van-popover>
  </div>
</template>

<script lang="ts">
import { useI18n } from '@/i18nPlugin'
import { ref, defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  nem: 'Mheader',
  // props: {
  //   headeType: {
  //     type: String,
  //     default: '',
  //   },
  // },
  setup: (props, context) => {
    const router = useRouter()
    const i18n = useI18n()
    const showPopover = ref(false)
    const headType = ref(props.headeType)
    const actions = [{ text: '中文' }, { text: 'English' }]
    let popSelect = (item: any) => {
      const locale = item.text === '中文' ? 'en' : 'es'
      i18n.locale.value = locale
    }
    let goToBack = () => {
      context.emit('goBack')
    }
    return {
      actions,
      i18n,
      popSelect,
      showPopover,
      headType,
      goToBack,
    }
  },
})
</script>

<style scoped lang="scss">
.header-div {
  width: 100%;
  padding: 0 10%;
  height: 40px;
  position: fixed;
  z-index: 1000;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  p:nth-child(1) {
    font-size: 14px;
    .van-icon {
      font-size: 18px;
    }
  }
}
.van-popover__content {
  width: 100%;
}
.flex-row :deep(.van-icon) {
  font-size: 30px;
}
.active {
  color: $theme !important;
  // font-weight: bold;
}
.rest {
  padding: 0 15% 0 5%;
}
</style>
